<template>
  <div>
    <el-pagination
      v-model:currentPage="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[10, 20, 50]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="needTotal"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";

export default {
  props: {
    needTotal: Number, //总的条数 //接受父传子的参数，总数居条数
  },
  //   定义父组件抛出的自定义事件，用于接收
  emits: ["everyPageCount", "sendCurpageNum"],

  setup(props, context) {
    const state = reactive({
      count: 0,
      pageSize4: 10, //每页多少条
      currentPage4: 1, //当前页
    });

// 每页多少条
    const handleSizeChange = (val) => {
    //   console.log(`${val} items per page`);
     context.emit("everyPageCount", { everyPageCount: val });
    };

// 当前页
    const handleCurrentChange = (val) => {
    //   console.log(`current page: ${val}`);
        context.emit("sendCurpageNum", { sendCurpageNum: val });
    };

    return {
      ...toRefs(state),
      handleSizeChange,
      handleCurrentChange,
    };
  },
};
</script>

<style lang="scss" scoped>
</style>